<template>
	<uni-transition :show="true" :duration="150" class="uni-transition">
		<view class="loading-page">
			<u-loading mode="circle" size="70" color="#E1835B"></u-loading>
			<text class="text">{{msg}}</text>
		</view>
	</uni-transition>
</template>
<script setup>
	import { ref, computed } from 'vue';
	const data_props = defineProps({
		msg: {
			type: String,
			default: ''
		},
		showNav: {
			type: Boolean,
			default: false
		},
		transparent: {
			type: Boolean,
			default: false
		}
	})
	const top = computed(() => {
		return data_props.showNav ? `${getApp().globalData.navHeight}px` : 0;
	})
	const bgColor = data_props.transparent?'rgba(255,255,255,0.01)':'#fff';
</script>
<style scoped lang="scss">
	.uni-transition {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		top: v-bind(top);
		right: 0;
		bottom: 0;
		z-index: 20220603;
		background: v-bind(bgColor);
	}

	.loading-page {
		display: flex;
		flex-direction: column;
		align-items: center;

		.text {
			margin: 10rpx 0 0;
			font-size: 28rpx;
			color: #999;
		}
	}
</style>